<template>
  <div style="width: 100%;position: relative;margin-bottom: 10px" v-if="showForm">
<!--    <div class="open_close" @click="open = !open">
      <i :class="open?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
      {{ open ? "收起" : "展开" }}
    </div>-->
    <transition name="search">
      <div v-show="open" :class="open?'show':'hidden'" class="search-box">
        <el-form class="formData" size="mini" :model="formData" label-width="130px">
          <template v-for="item in searchList">
            <el-col :span="item.colSpan?item.colSpan:12">
              <el-form-item :label="item.label">

                <el-input v-if="!item.type" :placeholder="'请输入 '+item.label"
                          v-model="formData[item.prop]">
                </el-input>

                <el-checkbox-group v-if="item.type === 'checkbox'" v-model="formData[item.prop]">
                  <template v-if="item.dicData">
                    <template v-for="option in item.dicData">
                      <el-checkbox :label="option.label"
                                   :value="option.value">
                      </el-checkbox>
                    </template>
                  </template>
                </el-checkbox-group>

                <el-radio-group v-if="item.type === 'radio'" v-model="formData[item.prop]">
                  <template v-if="item.dicData">
                    <template v-for="option in setAllOption(item.dicData)">
                      <el-radio :label="option.value">{{ option.label }}</el-radio>
                    </template>
                  </template>
                </el-radio-group>

                <el-select style="width: 100%"
                           :placeholder="'请选择 '+item.label"
                           v-if="item.type === 'select'&&item.dicData"
                           v-model="formData[item.prop]">
                  <template v-if="item.dicData">
                    <template v-for="option in setAllOption(item.dicData)">
                      <el-option :label="option.label"
                                 :value="option.value">
                      </el-option>
                    </template>
                  </template>
                </el-select>

                <el-select v-if="item.type === 'select'&&!item.dicData"
                           style="width: 100%"
                           :placeholder="'请选择 '+item.label"
                           v-model="formData[item.prop]">
                  <template v-for="option in dicUrlData[item.prop]">
                    <el-option :label="option[item.props.label]" :value="option[item.props.value]"></el-option>
                  </template>
                </el-select>

              </el-form-item>
            </el-col>
          </template>
        </el-form>
        <div class="searchBtn">
          <div>
            <el-button size="mini" type="primary" @click="$emit('searchClick',formData)">筛选</el-button>
            <el-button size="mini" @click="restFormData">重置</el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import request from '@/router/axios';

export default {
  name: "MSSearch",
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    queryForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    that: Function
  },
  data() {
    return {
      formData: {},
      dicUrlData: {},
      open: true,
    }
  },
  computed: {
    searchList() {
      let array = [];
      this.list.forEach(item => {
        if (item.msSearch) {
          array.push(item)
          if (item.dicUrl) {
            request({
              url: item.dicUrl,
              method: 'get',
            }).then(res => {
              let obj = {};
              obj[item.props.value] = "";
              obj[item.props.label] = "全部";
              res.data.data.unshift(obj)
              this.$set(this.dicUrlData, item.prop, res.data.data);
            })
          }
        }
      })
      array.sort((a, b) => a.searchOrder - b.searchOrder);
      return array;
    },
    showForm() {
      let num = 0;
      for (const key in this.formData) {
        num++;
      }
      return num > 0;
    }
  },
  methods: {
    setAllOption(dicData, item, byUrl = false) {
      let data = this.deepCopy(dicData);
      if (!byUrl) {
        let obj = {};
        obj["value"] = "";
        obj["label"] = "全部";
        data.unshift(obj)
      } else {
        let obj = {};
        obj[item.props.value] = "";
        obj[item.props.label] = "全部";
        data.unshift(obj)
      }
      return data;
    },
    restFormData() {
      this.formData = this.setSearchForm(this.list);
      this.queryForm = this.formData
      this.$emit('searchClick', {})
    }
  },
  mounted() {
  },
  created() {
  },
  watch: {
    list: {
      handler(v) {
        this.formData = this.setSearchForm(v);
        this.queryForm = this.formData
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped lang="scss">
.open_close {
  font-size: 13px;
  cursor: pointer;
}

.search-enter-active,
.search-leave-active {
  transition: all .4s;
}

.search-enter,
.search-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}

.formData {
  width: 65%;
  height: auto;
  margin: auto;
  padding-left: -130px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;

  .el-form-item {
    margin-bottom: 0;
  }
}

.searchBtn {
  min-width: 150px;
  position: absolute;
  //bottom: 17%;
  height: 100%;
  bottom: 0;
  right: 2%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 8px;
}
</style>
